<template>
	<div>
		<div class="ef-node-form">
			<div class="ef-node-form-header">
				编辑
			</div>
			<div class="ef-node-form-body">
				<el-form :model="node" ref="dataForm" size="mini" label-width="80px" v-show="type === 'node'">
					<el-form-item label="名称">
						<el-input v-model="node.name"></el-input>
					</el-form-item>
					<el-form-item label="执行权限">
						<el-radio-group v-model="role" size="mini">
							<el-radio-button label="角色"></el-radio-button>
							<el-radio-button label="用户"></el-radio-button>
							<el-radio-button label="所有人"></el-radio-button>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="指定角色">
						<el-select v-model="node.state" placeholder="请选择">
							<el-option v-for="item in stateList" :key="item.state" :label="item.label" :value="item.state">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button icon="el-icon-close">重置</el-button>
						<el-button type="primary" icon="el-icon-check" @click="save">保存</el-button>
					</el-form-item>
					<el-form-item label="类型">
						<el-input v-model="node.type" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="left坐标">
						<el-input v-model="node.left" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="top坐标">
						<el-input v-model="node.top" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="ico图标">
						<el-input v-model="node.ico" :disabled="true"></el-input>
					</el-form-item>
				</el-form>

				<el-form :model="line" ref="dataForm" size="mini" label-width="50px" v-show="type === 'line'">
					<el-form-item label="名称">
						<el-input v-model="line.label"></el-input>
					</el-form-item>
					<el-form-item size="mini" label="条件" v-for="(compare, index) in lineTemp.Compares" :key="index">
						<el-row>
							<el-select :popper-append-to-body="false" v-model="compare.FieldName" style="width: 150px;" placeholder="请选择">
								<el-option v-for="item in formTemplate" :key="item.field" :label="item.name" :value="item.field"></el-option>
							</el-select>
						</el-row>
						<el-row style="margin-top: 6px;">
							<el-col :span="9">
								<el-select :popper-append-to-body="false" v-model="compare.Operation" style="width: 85px;" placeholder="请选择">
									<el-option label="=" value="="></el-option>
									<el-option label="!=" value="!="></el-option>
									<el-option label=">" value=">"></el-option>
									<el-option label=">=" value=">="></el-option>
									<el-option label="<" value="<"></el-option>
									<el-option label="<=" value="<="></el-option>
									<el-option label="包含" value="包含"></el-option>
									<el-option label="不包含" value="不包含"></el-option>
									<el-option label="属于" value="属于"></el-option>
									<el-option label="不属于" value="不属于"></el-option>
								</el-select>
							</el-col>
							<el-col :span="12">
								<el-input v-model="compare.Value" style="width: 100px;" placeholder="值"></el-input>
							</el-col>
							<el-col :span="3">
								<el-button type="primary" size="mini" icon="el-icon-plus" v-if="index === 0" @click="btnAddCompare" circle></el-button>
								<el-button type="danger" size="mini" icon="el-icon-delete" v-if="index != 0" @click="btnDelCompare(index)"
								 circle></el-button>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item>
						<el-button icon="el-icon-close">重置</el-button>
						<el-button type="primary" icon="el-icon-check" @click="saveLine">保存</el-button>
					</el-form-item>
				</el-form>
			</div>
			<!--            <div class="el-node-form-tag"></div>-->
		</div>
	</div>

</template>

<script>
	import {
		cloneDeep
	} from 'lodash'

	export default {
		props: {
			formTemplate: null
		},
		data() {
			return {
				visible: true,
				// node 或 line
				type: 'node',
				node: {},
				line: {},
				data: {},
				role: '角色',
				stateList: [{
					state: 'success',
					label: '成功'
				}, {
					state: 'warning',
					label: '警告'
				}, {
					state: 'error',
					label: '错误'
				}, {
					state: 'running',
					label: '运行中'
				}],
				lineTemp: {
					// 线段的设置项
					name: '',
					Compares: [{}] // 分支条件
				}
			}
		},
		methods: {
			btnAddCompare() {
				// console.log(this.lineTemp.Compares)
				this.lineTemp.Compares.push({
					FieldName: '',
					Operation: '',
					Value: ''
				})
			},
			btnDelCompare(e) {
				this.lineTemp.Compares.splice(e, 1)
			},
			/**
			 * 表单修改，这里可以根据传入的ID进行业务信息获取
			 * @param data
			 * @param id
			 */
			nodeInit(data, id) {
				this.type = 'node'
				this.data = data
				data.nodeList.filter((node) => {
					if (node.id === id) {
						this.node = cloneDeep(node)
					}
				})
			},
			lineInit(line) {
				this.type = 'line'
				this.line = line
			},
			// 修改连线
			saveLine() {
				this.$emit('setLineLabel', this.line.from, this.line.to, this.line.label)
			},
			save() {
				this.data.nodeList.filter((node) => {
					if (node.id === this.node.id) {
						node.name = this.node.name
						node.left = this.node.left
						node.top = this.node.top
						node.ico = this.node.ico
						node.state = this.node.state
						this.$emit('repaintEverything')
					}
				})
			}
		}
	}
</script>

<style>
	.el-node-form-tag {
		position: absolute;
		top: 50%;
		margin-left: -15px;
		height: 40px;
		width: 15px;
		background-color: #fbfbfb;
		border: 1px solid rgb(220, 227, 232);
		border-right: none;
		z-index: 0;
	}
</style>
